<!doctype html>
<html lang="en" data-framework="batman">
	<head>
		<meta charset="utf-8">
		<title>Batman • TodoMVC</title>
		<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
		<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
	</head>
	<body>
		<section id="todoapp">
			<header id="header">
				<h1>todos</h1>
				<div data-yield="header"></div>
			</header>
			<div data-yield="main"></div>
		</section>
		<footer id="info">
			<p>Double-click to edit a todo</p>
			<p>Created by <a href="http://batmanjs.org">Harry Brundage</a></p>
			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
		</footer>

		<div data-defineview="todos/index">
				<div data-contentfor="header">
					<form data-event-submit="createTodo">
						<input id="new-todo" type="text" placeholder="What needs to be completed?" autofocus>
					</form>
				</div>

				<section id="main" class="hidden" data-removeclass-hidden="Todo.all.length">
					<input id="toggle-all" type="checkbox" data-event-change="toggleAll" data-source="Todo.completed.length | equals Todo.all.length">
					<label for="toggle-all">Mark all as complete</label>
					<ul id="todo-list">
						<li data-foreach-todo="Todo[currentTodoSet]"
								data-context="todo"
								data-addclass-completed="completed"
								data-addclass-editing="editing" >
							<div class="view" data-hideif="editing">
								<input class="toggle" type="checkbox" data-bind="completed">
								<label data-bind="title" data-event-doubleclick="toggleEditing"></label>
								<button class="destroy" data-event-click="destroyTodo"></button>
							</div>
							<input class="edit" type="text"
								data-bind="title"
								data-bind-id="'todo-input-' | append id"
								data-event-blur="toggleEditing"
								data-event-keypress="disableEditingOnEnter">
						</li>
					</ul>
				</section>


				<footer id="footer" class="hidden" data-removeclass-hidden="Todo.all.length">
					<span id="todo-count">
						<strong data-bind="Todo.active.length"></strong>
						<span data-bind="'item' | pluralize Todo.active.length, false"></span> left
					</span>
					<ul id="filters">
						<li>
							<a data-addclass-selected="currentTodoSet | equals 'all'" data-route="routes.all">All</a>
						</li>
						<li>
							<a data-addclass-selected="currentTodoSet | equals 'active'" data-route="routes.active">Active</a>
						</li>
						<li>
							<a data-addclass-selected="currentTodoSet | equals 'completed'" data-route="routes.completed">Completed</a>
						</li>
					</ul>
					<button id="clear-completed" data-event-click="clearCompleted" data-showif="Todo.completed.length">
						Clear completed (<span data-bind="Todo.completed.length"></span>)
					</button>
				</footer>

		</div>
		<script src="node_modules/todomvc-common/base.js"></script>
		<script src="node_modules/batman/lib/dist/batman.js"></script>
		<script src="app.js"></script>
		<script>
			Alfred.run()
		</script>
	</body>
</html>
